.btn-primary,
.btn-secondary {
  @extend .p-a-1;
  border: none;
  color: $body-text-color;

  font-family: $font-family-sans-serif;

  text-transform: uppercase;
  font-weight: 400;
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.08);
  border-radius: 4px;

	transition: all .3s;
}

.btn-primary {
  background-color: $body-primary-color;
  background-image: -webkit-gradient(linear, left center, right center, from(rgb(49, 225, 197)), to(rgb(87, 221, 193)));
  background-image: -webkit-linear-gradient(left, rgb(49, 225, 197), rgb(87, 221, 193));
  background-image: -moz-linear-gradient(left, rgb(49, 225, 197), rgb(87, 221, 193));
  background-image: -o-linear-gradient(left, rgb(49, 225, 197), rgb(87, 221, 193));
  background-image: -ms-linear-gradient(left, rgb(49, 225, 197), rgb(87, 221, 193));
  background-image: linear-gradient(left, rgb(49, 225, 197), rgb(87, 221, 193));

	&:hover,
  &:focus,
  &:active,
  &:active:focus {
		background-color: lighten($body-primary-color, 10%);
    color: #1d1d3e;
	}
}

.btn-secondary {
  background-color: $body-secondary-color;
  background-image: -webkit-gradient(linear, left center, right center, from(rgb(59, 200, 226)), to(rgb(130, 211, 226)));
  background-image: -webkit-linear-gradient(left, rgb(59, 200, 226), rgb(130, 211, 226));
  background-image: -moz-linear-gradient(left, rgb(59, 200, 226), rgb(130, 211, 226));
  background-image: -o-linear-gradient(left, rgb(59, 200, 226), rgb(130, 211, 226));
  background-image: -ms-linear-gradient(left, rgb(59, 200, 226), rgb(130, 211, 226));
  background-image: linear-gradient(left, rgb(59, 200, 226), rgb(130, 211, 226));

  &:hover,
  &:focus,
  &:active,
  &:active:focus {
		background-color: lighten($body-secondary-color, 10%);
    color: #1d1d3e;
	}
}

.btn + .btn {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
